/**
* @description: 已办工单 ==> 已办工单（我完成的）==> 巡视设备列表
**/
<template>
  <view class="task-monitor-main">
    <nav-bar class="header" back title="巡视设备列表" @goBack="goBack">
          <img slot="screen" src="../../../static/img/sx.png" alt="" @click="screen">
    </nav-bar>

    <view class="main-container">
      <!-- 搜索框  -->
      <view class="search">
        <van-search
          disabled
          v-model="searchValue"
          left-icon=""
          right-icon="search"
          placeholder="请输入设备名称"
          @click="showSearch = true;"
        />
      </view>
      <view class="task-list-container" v-if="taskList.length > 0">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <!-- 列表循环   -->
          <van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore">
            <view class="task-list" v-for="(item,index) in taskList" :key="index" @click="jump(item)">
              <view class="task-title">
                <text class="task-status green">
                  <text>{{item.TOUR_STATE_NAME}}</text>
                </text>
                <view class="task-title-main">
<!--                  <img src="../../../static/img/equipment.png" alt="" v-if="item.NE_TYPE_NAME === '通信设备'">-->
<!--                  <img src="../../../static/img/opticalCable.png" alt="" v-if="item.NE_TYPE_NAME === '通信光缆'">-->
<!--                  <img src="../../../static/img/powerSupply.png" alt="" v-if="item.NE_TYPE_NAME === '通信电源'">-->
                  <text class="task-title-main-text">{{ item.NAME }}</text>
                </view>
              </view>
              <hr class="task-hr">
              <view class="top-task-main">
                <view>
                  <text class="task-big-ltitle">设备分类：</text>
                  <text class="task-small-ltitle">{{ item.NE_TYPE_NAME }}</text>
                </view>
                <view>
                  <text class="task-big-rtitle">巡视人：</text>
                  <text class="task-small-rtitle">{{ item.TOUR_OPER_NAME }}</text>
                </view>
                <view>
                  <text class="task-big-rtitle">巡视时间：</text>
                  <text class="task-small-rtitle">{{ item.TOUR_TIM }}</text>
                </view>
                <view>
                  <text class="task-big-ltitle">巡视结果：</text>
                  <text class="task-small-ltitle" :style="{color: statusColor(item.SERVICE_STATE_NAME)}">{{ item.SERVICE_STATE_NAME }}</text>
                </view>
              </view>
            </view>
          </van-list>

        </van-pull-refresh>
      </view>
    </view>
    <!--弹出搜索页-->
    <van-popup v-model="showSearch" position="right">
      <search @cancel="showSearch = false;" :empty="showSearch"
              @search="onSearch" />
    </van-popup>
    <!--筛选弹窗-->
    <screenPopup :type-list="typeList" :showScreen="showScreen" @closePopup="showScreen=false" @confirm="confirmCondition" v-if="typeList.length>0" />
  </view>
</template>

<script>
import navBar from '../../../components/common/nav-bar'
import screenPopup from '../../../components/common/screenPopup'
import search from "../../common/search";

export default {
  name: 'taskMonitor',
  components: { navBar, screenPopup, search },
  data() {
    return {
      searchValue: '',
      refreshing: false,
      finished: false,
      isLoading: false,
      showScreen: false,
      showSearch: false,
      taskList: [],
      typeList: [],
      ne_flag: '',
      tour_state: '1',
      page: 1, // 当前数据页数
      totalPage: 0, // 总页数
      pageSize: 20, // 默认每页20条
      total: 0, // 总条数
      statusColor: state => {
        if (state === '一致') return '#417ADC'
        if (state === '新增') return '#41DC83'
        if (state === '不存在') return '#FF4355'
        if (state === '更新') return '#FFAD0E'
      },
      task_id: '',
      taskState: ''
    }
  },
  onLoad(e) {
    this.task_id = e.task_id
    this.taskState = e.taskState
  },
  mounted() {
    this.getTaskNeList()
  },
  methods: {
    confirmCondition(selected) {
      if (selected['NE_TYPE_NAME'] == 0) {
        this.ne_flag = ''
      } else {
        this.ne_flag = selected['NE_TYPE_NAME']
      }
      this.onRefresh()
    },
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.page = 1;
      this.taskList = [];
      this.getTaskNeList();
    },
    loadMore() {
      console.log('loadmore')
      if (this.total > this.taskList.length) {
        this.page = this.page + 1
        this.getTaskNeList()
      } else {
        this.finished = true
      }
    },
    getTaskNeList() {
      this.$api
        .getTaskNeList({
          task_id: this.task_id,
          ne_name: this.searchValue,
          ne_flag: this.ne_flag,
          tour_state: this.tour_state,

          limit: this.pageSize,
          page: this.page
        })
        .then(res => {
          this.isLoading = false
          this.refreshing = false
          this.taskList = this.taskList.concat(res.data.ne_list)
          // 因为接口将筛选列表和筛选结果放在一个接口中，导致点击筛选时，出现重新获取筛选列表的情况，从而导致，筛选无法记忆（刷新），解决办法为判断是否已经含有
          if (!this.typeList.length) {
            let typeList = []
            typeList.push({
              title: '设备类型',
              optionList: res.data.ne_type.map(item => {
                !item.VALUE ? (item.VALUE = '') : null
                return item
              }),
              type: 'NE_TYPE_NAME'
            })
            this.typeList = typeList
          }

          this.total = res.data.total_number
        })
    },
    goBack() {
      // uni.navigateBack()
      uni.navigateTo({
        url: `/pages/workBench/completedTask/taskDetail?TASK_STATE=${this.taskState}&OBJ_ID=${this.task_id}`
      })
    },
    screen() {
      this.showScreen = true
    },
    onSearch(searchValue) {
      this.searchValue = searchValue;
      this.onRefresh();
      this.showSearch = false;
    },
    jump(item) {
      switch (item.NE_TYPE_NAME) {
        case '通信设备': {
          uni.navigateTo({
            url: `/pages/workBench/tourTask/taskMonitor/tourEquipment/equipmentDetail?id=${item.OBJ_ID}`
          })
          break
        }
        case '通信光缆': {
          uni.navigateTo({
            url: `/pages/workBench/tourTask/taskMonitor/tourEquipment/cableDetail?id=${item.OBJ_ID}`
          })
          break
        }
        case '通信电源': {
          uni.navigateTo({
            url: `/pages/workBench/tourTask/taskMonitor/tourEquipment/powerDetail?id=${item.OBJ_ID}&taskState=${this.taskState}`
          })
          break
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.task-monitor-main {
  min-height: 100vh;
  background: #f2f6fa;

  .header {
    position: sticky;
    top: 0;
    img {
      width: px2vw(48);
      margin-right: px2vw(40);
    }

    .header-right {
      display: flex;

      /deep/ .van-icon {
        font-size: px2vw(52);
        font-weight: bold;
      }

      /deep/ .van-icon-scan {
        margin-right: px2vw(12);
      }

      /deep/ .van-icon-filter-o {
        margin-left: px2vw(12);
      }
    }
  }

  .main-container {
    .search {
      width: px2vw(1020);
      height: 38px;
      margin: px2vw(30) px2vh(30);
      border-radius: px2vw(20);
      overflow: hidden;

      .van-search {
        padding: 0 0;
        height: 38px;
      }

      .van-search__content {
        background: #fff;
        height: 38px;
      }

      /deep/ .van-field__control {
        height: 30px;
      }
    }

    .task-list-container {
      height: calc(100vh - #{px2vh(230)} - 38px);
      overflow: auto;

      .task-list {
        width: px2vw(1020);
        background: #fff;
        border-radius: px2vw(20) px2vh(20);
        padding-bottom: px2vh(30);
        margin: 0 px2vw(30) px2vh(30) px2vw(30);

        .task-title {
          width: px2vw(940);
          //height: px2vh(80);
          margin-left: px2vw(40);
          padding-top: px2vw(30);
          margin-bottom: px2vh(30);
          display: flex;
          align-items: center;
          //justify-content: space-between;

          .task-title-main {
            display: flex;
            align-items: center;

            img {
              width: px2vw(64);
              height: px2vw(64);
            }
  
            .task-title-main-text {
              margin-left: px2vw(20);
              font-size: px2vh(48);
              word-break: break-all;
              //white-space: nowrap;
              //overflow: hidden;
              //text-overflow: ellipsis;
              //max-width: px2vw(700);
            }
          }
          
          .task-status {
            min-width: px2vw(143);
            height: px2vh(50);
            border-radius: px2vw(10);
            font-size: px2vw(32);
            text-align: center;
          }

          .task-status.blue {
            color: #417adc;
            background: #e4ecfa;
          }

          .task-status.red {
            color: #ff7070;
            background: rgba(255, 112, 112, 0.1);
          }

          .task-status.yellow {
            color: #ffad0e;
            background: rgba(255, 180, 0, 0.1);
          }

          .task-status.green {
            color: #3cda68;
            background: rgba(62, 218, 104, 0.1);
          }
        }

        .task-hr {
          width: px2vw(940);
          border: px2vh(1) solid #e5e5e5;
          margin-left: px2vw(40);
          margin-bottom: px2vh(42);
        }

        .top-task-main {
          width: px2vw(900);
          font-size: px2vh(36);
          line-height: px2vh(62);
          margin-left: px2vw(60);

          .task-big-ltitle,
          .task-big-rtitle {
            color: #666;
          }

          .task-small-ltitle,
          .task-small-rtitle {
            //margin-left: px2vw(25);
            color: #333;
          }

          .task-big-rtitle {
            //margin-left: px2vw(245);
          }
        }
      }
    }
  }
}
</style>